<template>
    <div>
        <transition :name="name">
            <div v-if="visible" class="popfix" :style="{'z-index':zindex,'background-color':backgroundColor}" @click="hide">
                <slot></slot>
            </div>
        </transition>
    </div>
</template>

<script>
export default {
    props:{
        visible:{
            type:Boolean,
            default:false
        },
        name:{
            type:String,
            default:'up'
        },
        modelHide:{
            type:Boolean,
            default:true
        },
        zindex:{
            type:String,
            default:'0'
        },
        backgroundColor:{
            type:String,
            default:'' 
        }
    },
    methods: {
        hide(){
            if(this.modelHide){
                this.$emit('update:visible',false);
            }            
        }
    },
}
</script>

<style scoped>
    .up-enter,.up-leave-to{
        opacity: 0;
        transform: translateY(100%);
    }
    .up-enter-active,.up-leave-active{
        transition: all 0.3s ease-in-out;
    }
    .top-enter,.top-leave-to{
        opacity: 0;
        transform: translateY(-100%);
    }
    .top-enter-active,.top-leave-active{
        transition: all 0.3s ease-in-out;
    }
    .left-enter,.left-leave-to{
        opacity: 0;
        transform: translateX(100%);
    }
    .left-enter-active,.left-leave-active{
        transition: all 0.3s ease-in-out;
    }
    .right-enter,.right-leave-to{
        opacity: 0;
        transform: translateX(-100%);
    }
    .right-enter-active,.right-leave-active{
        transition: all 0.3s ease-in-out;
    }
    .center-enter,.center-leave-to{
        opacity: 0;
        transform:scale(0,0);
    }
    .center-enter-active,.center-leave-active{
        transition: all 0.3s ease-in-out;
    }
    .opacity-enter,.opacity-leave-to{
        opacity: 0;
    }
    .opacity-enter-active,.opacity-leave-active{
        transition: all 0.3s ease-in-out;
    }
    .popfix{
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: rgba(51, 51, 51, 0.6);
    }
</style>